﻿<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3stone</title>
    <link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'> 
    <link rel='stylesheet' id='camera-css'  href='css/camera.css' type='text/css' media='all'> 
    <link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
    <link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/3stone.css" rel="stylesheet" type="text/css">
  <script>
    var userAgent = navigator.userAgent + '';
    if (userAgent.indexOf('iPhone') > -1) {
      document.write('<script src="js/lib/cordova-iphone.js"></sc' + 'ript>');
      var mobile_system = 'iphone';
    } else if (userAgent.indexOf('Android') > -1) {
      document.write('<script src="js/lib/cordova-2.0.0.js"></sc' + 'ript>');
      document.write('<script src="js/lib/barcodescanner.js"></sc' + 'ript>');
      document.write('<script src="js/lib/webintent.js"></sc' + 'ript>');
      var mobile_system = 'android';
    } else {
      var mobile_system = '';
    }
  </script>
    <script src="js/lib/jquery.js"></script>
    <!-- your scripts here -->
    <script src="js/app/app.js"></script>
    <script src="js/app/bootstrap.js"></script>
    <script src="js/lib/jquery.mobile.js"></script>
    <script type='text/javascript' src='scripts/camera.min.js'></script> 
    <script src="js/jquery.easing.1.3.js"></script>
    <script>
        function onDeviceReady() {
            console.log("We got device ready");
            cordova.exec(null, null, "SplashScreen", "hide", []);
        }
        // Soon to beonDeviceReady
        // navigator.splashscreen.hide();
    </script>

    <script>
        var ajaxQueryShopimagesString='';
        function ajaxQueryShopimages(data){
            ajaxQueryShopimagesString='';
            var storeId='';
            for(var i=0;i<data.length;i++){
                ajaxQueryShopimagesString+="		 <div data-thumb='http://imindmap.asia/"+data[i].Shopimage.ImagePath+"' data-src='http://imindmap.asia/"+data[i].Shopimage.ImagePath+"'>"
            //   +"<div class='camera_caption fadeFromBottom'>步道導覽 自然之旅</div>"
                +"</div>";
            }
		}
		
        $("#index").live("pagebeforeshow", function(e, data){
			jQuery.ajax({
				url: 'http://imindmap.asia/mcouponMgr/Shopimages/ajaxQueryshopimages',
				type: 'post',
				data: {
					method: 'set_user_prizes',
                                        id : '1'
				},
				dataType: 'jsonp',
				jsonp: true,
				jsonpCallbackString: ajaxQueryShopimages,
				complete: function(jqXHR){
					if(jqXHR.status==200){
						($("#camera_wrap_2").html(ajaxQueryShopimagesString));
						//alert(ajaxQueryShopimagesString);
						jQuery('#camera_wrap_2').camera({
							height: '40%',
							loader: 'bar',
							pagination: true,
							thumbnails: false
						});
					}
					else
					{
						($("#camera_wrap_2").html(' <li>無法連線server，請稍後再試')).trigger('create');
					}
				}	
			});   
		});
	</script>
</head> 
<body> 
	<!--首頁開始-->
	<div data-role="page" id="index">
		<div data-role="header">
			<!-- camera_wrap_2-->
			<div class="camera_wrap camera_magenta_skin" id="camera_wrap_2">
			</div>
			<!-- #camera_wrap_2 -->
		</div>
		<div data-role="content">
			<div data-role="controlgroup">
				<a href="#" onclick="location.href='StoreList.html'"><button data-icon="arrow-r">店家列表</button></a>
				<a href="#coupon"><button data-icon="arrow-r">優惠好康</button></a>
				<a href="#game"><button data-icon="arrow-r">闖關遊戲</button></a>
				<a href="#favorites"><button data-icon="arrow-r">我的最愛</button></a>
			</div>      
		</div>
		<div class="copyright" data-role="footer">
			Copyright&copy;2012 3stone 
		</div>
	</div>
<!--首頁結束-->
</body>
</html>
